<script setup>
import topNav from "../../components/topNav.vue";
import { onMounted, reactive, ref, getCurrentInstance, computed } from "vue";
import { onLoad, onReachBottom, onShow } from "@dcloudio/uni-app";
// import { getAppReceive } from "@/services/delivery";
import { appReceivePurchase } from "@/services/send";
import { operation } from "@/utils/num.js";

const id = ref("");
const detailData = ref({});

onLoad((e) => {
  id.value = e.id;
  getAppReceiveFun();
});

const getAppReceiveFun = async (index) => {
  try {
    let res = await appReceivePurchase({ id: id.value });
    if (res.code == 200) {
      detailData.value = res.data;
    } else {
    }

    console.log(res);
  } catch (e) {}
};

const sandfun = () => {
  uni.navigateTo({
    url: "/pages/delivery/send/index?id=" + id.value,
  });
};
const showLen = ref(3);

const showLenFun = () => {
  console.log(showLen.value);
  if (showLen.value > 3) {
    showLen.value = 3;
  } else {
    showLen.value = detailData.value.products.length;
  }
};
const numFun = (num, num2) => {
  return operation(num, num2, 2, "subtract");
};

const previewImage = (urls, index) => {
  uni.previewImage({
    urls: urls,
    current: index,
  });
};

//无网状态
const connected = () => {
  getAppReceiveFun();
};
</script>

<template>
  <topNav
    title="查看收货单"
    @search="searchFun"
    @scan="scanFun"
    rType="save"
    :clickable="false"
  ></topNav>

  <view class="content">
    <view class="top">
      <up-copy :content="detailData.code">
        <view class="item_title_left">
          <text>单据号：{{ detailData.code }}</text>
          <image src="@/static/images/copy.png" mode="scaleToFill" />
        </view>
      </up-copy>

      <view class="top_content">
        <view class="top_content_title">
          <text class="tags">供</text>
          <view>{{ detailData.supplierName }}</view>
        </view>
        <view class="top_content_title">
          <text class="tags2">仓</text>
          <view>{{
            detailData.storeCenter && detailData.storeCenter.name
          }}</view>
        </view>
      </view>
    </view>

    <view class="list">
      <view class="list_title">商品信息</view>
      <view
        class="list_item"
        v-for="(item, index) in detailData.products"
        :key="index"
      >
        <view v-if="index < showLen" class="list_item_k">
          <view class="item_title_left">
            <view class="ts notice" v-if="item.isStandard == 0">非标品</view>
            <view class="ts notice-no" v-if="item.isStandard == 1">标品</view>
            <image :src="item.image" mode="scaleToFill" />
            <view class="info">
              <view class="info_title"
                ><text class="name">{{ item.productName }}</text>
                <view
                  ><text>x</text> {{ item.orderNum }}{{ item.unit }}</view
                ></view
              >
              <!-- <view class="info_dec">{{ item.barCode }} </view> -->
              <view class="info_dec" v-if="item.spec"
                >商品规格: {{ item.spec }}
              </view>
              <view class="info_price">¥{{ item.taxPrice }} </view>
            </view>
          </view>
        </view>
      </view>

      <view class="more">
        <text
          class="more-text"
          @click="showLenFun"
          v-if="
            showLen <= 3 &&
            (detailData.products && detailData.products.length) > 3
          "
        >
          还有{{
            (detailData.products && detailData.products.length) - showLen
          }}种商品
        </text>
        <up-icon
          v-if="
            showLen <= 3 &&
            (detailData.products && detailData.products.length) > 3
          "
          class="arrow-right-double"
          name="arrow-right-double"
          size="24rpx"
          color="#999999"
        />
        <text class="more-text" @click="showLenFun" v-if="showLen > 3">
          关闭展开
        </text>
        <up-icon
          v-if="showLen > 3"
          class="arrow-right-double2"
          name="arrow-right-double"
          size="24rpx"
          color="#999999"
        />
      </view>
    </view>

    <!-- <view class="pay_num">
      实收： <text>¥{{ detailData.totalAmount }}</text>
    </view> -->
  </view>

  <!-- <view class="goods-ps">
    <view class="goods_ps_top">
      <view class="goods_ps_top_left">
        <text>接收仓库：</text
        ><text>{{
          detailData.storeCenter && detailData.storeCenter.name
        }}</text>
      </view>
      <view class="goods_ps_share">
        <view class="goods_ps_share-flex">
          <up-icon name="share-square" size="36rpx" color="#1679FB" />
          <text>发送给司机</text>
        </view>
      </view>
    </view>

    <view class="goods_sj_info">
      <view class="goods_sj_info_left">
        <view class="name">
          <up-icon name="account" size="30rpx" color="#999999" />
          <text>{{
            detailData.storeCenter && detailData.storeCenter.contact
          }}</text>
        </view>
        <view class="address">
          <up-icon name="map" class="map" size="30rpx" color="#999999" />
          <text
            >{{ detailData.storeCenter && detailData.storeCenter.cityName
            }}{{
              detailData.storeCenter && detailData.storeCenter.cityName
                ? detailData.storeCenter.address
                : ""
            }}</text
          >
        </view>
      </view>
      <view class="goods_sj_info_right">
        <view class="goods_sj_item_cz">
          <up-icon name="map-fill" size="40rpx" color="#999999" />
          <text>导航</text>
        </view>
        <view class="goods_sj_item_cz">
          <up-icon name="phone-fill" size="40rpx" color="#999999" />
          <text>导航</text>
        </view>
      </view>
    </view>
  </view> -->

  <view class="det" v-for="(item, index) in detailData.logistics" :key="index">
    <view class="det_title">物流信息{{ index > 0 ? index + 1 : "" }}</view>
    <view class="det_list">
      <view class="det_info det_info2">
        <view class="det_info_item">配货方式</view>
        <text>{{ item.deliveryMethodName }}</text>
      </view>
      <view class="det_info" v-if="item.logisticsCompany">
        <view class="det_info_item">物流公司</view>
        <text>{{ item.logisticsCompany }}</text>
      </view>
      <view class="det_info" v-if="item.logisticsCode">
        <view class="det_info_item">物流单号</view>
        <text>{{ item.logisticsCode }}</text>
      </view>
      <view class="det_info" v-if="item.sendDate">
        <view class="det_info_item">发货时间</view>
        <text>{{ item.sendDate }}</text>
      </view>
      <view class="det_info" v-if="item.receiveDate">
        <view class="det_info_item">预计到货时间</view>
        <text>{{ item.receiveDate }}</text>
      </view>
      <view class="det_info" v-if="item.driverOne">
        <view class="det_info_item">司机/电话</view>
        <text>{{ item.driverOne }} /{{ item.driverPhoneOne }}</text>
      </view>
      <view class="det_info" v-if="item.driverTwo">
        <view class="det_info_item">司机2/电话2</view>
        <text>{{ item.driverTwo }}/{{ item.driverPhoneTwo }}</text>
      </view>
      <view class="det_info" v-if="item.vehicleType">
        <view class="det_info_item">车辆类型</view>
        <text>{{ item.vehicleType }}</text>
      </view>
      <view class="det_info" v-if="item.licensePlate">
        <view class="det_info_item">车牌号</view>
        <text>{{ item.licensePlate }}</text>
      </view>

      <view class="det_info" v-if="item.remark">
        <view class="det_info_item det_info_item2">备注</view>
        <text>{{ item.remark }}</text>
      </view>
    </view>
  </view>
  <view style="width: 100%; height: 150rpx"></view>

  <!-- <view class="goods_bt">
    <view class="goods_bt_to">
      <view class="bt_fh bt_qx" @click.stop>取消</view>
      <view class="bt_fh bt_qr" @click.stop="sandfun">发货</view>
    </view>
  </view> -->
  <noWork @connected="connected"> </noWork>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
